<template>
	<Navbar :showLeft="false" title="刷题app"></Navbar>
	<view class="content">
		<view class="uni-margin-wrap">
			<swiper class="swiper-box" indicator-dots autoplay="true">
				<swiper-item v-for="(item, index) in carouselList" :key="index">
					<view class="swiper-item">
						<image @click="swiperJump(item)" :src="proxy.Api.domain + proxy.Api.imageUrl + item.imgPath"
							mode="aspectFill" :style="{ width: '100%' }"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="quick-list">
			<view class="quick-item search3" @click="goSearch">
				<view class="title">题目搜索</view>
				<view class="summary">支持通过关键词搜索</view>
				<view class="btn">去搜索</view>
			</view>
		</view>
		<view class="quick-list">
			<view class="quick-item interview1" @click="goExam">
				<view class="title">考试模拟</view>
				<view class="summary">检测学习效果</view>
				<view class="btn">去考试</view>
			</view>
			<view class="quick-item interview2" @click="goWrong">
				<view class="title">错题练习</view>
				<view class="summary">检测学习效果</view>
				<view class="btn">去练习</view>
			</view>
		</view>
		<view class="quick-list">
			<view class="quick-item search1" @click="goChapter">
				<view class="title">章节练习</view>
				<view class="summary">每章的题目</view>
				<view class="btn">去练习</view>
			</view>
			<view class="quick-item search2" @click="goCategory">
				<view class="title">科目练习</view>
				<view class="summary">每科的题目</view>
				<view class="btn">去练习</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Update from "@/pages/components/Update.vue";
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		getCurrentInstance,
		nextTick,
		computed
	} from "vue";
	import {
		LOCAL_STORAGE_KEY
	} from "@/utils/Constants.js";
	import {
		useQuestionCategoryStore
	} from "@/stores/questionCategory";
	import {
		usePageOpStore
	} from "@/stores/pageOp";
	const quesitonCategoryStore = useQuestionCategoryStore();
	const pageOpStore = usePageOpStore();

	const {
		proxy
	} = getCurrentInstance();

	//打开检测更新
	const updateRef = ref();
	const checkUpdate = () => {
		nextTick(() => {
			updateRef.value.checkUpdate(false);
		});
	};
	checkUpdate();
	//轮播图
	const carouselList = ref([]);
	const loadCarouselData = async () => {
		let result = await proxy.Request({
			url: proxy.Api.loadCarousel,
			showLoading: false,
		});
		if (!result) {
			return;
		}
		carouselList.value = result.data;
	};
	loadCarouselData();

	onPullDownRefresh(() => {
		loadCarouselData();
	});

	const goWrong = () => {
		const token = uni.getStorageSync(LOCAL_STORAGE_KEY.token.key);
		// 判断用户是否登录
		if (token == "" || token == null) {
			uni.navigateTo({
				url: "/pages/account/LoginAndRegister",
			});
			return;
		}
		let item = {
			title: "我的错题",
			type: 2
		}
		uni.navigateTo({
			url: `./parctise/PractiseQuestion?item=${encodeURIComponent(JSON.stringify(item))}`
		})
	}
	const goExam = () => {
		uni.switchTab({
			url: "./exam/Exam",
		});
	};
	const goChapter = () => {
		uni.redirectTo({
			url: "./chapter/Index"
		})
	}
	const goCategory = () => {
		uni.redirectTo({
			url: "./category/Index"
		})
	}
	const swiperJump = (data) => {
		//不能左右滑动，可以收藏
		pageOpStore.setOp(false, true);

		let url = `/pages/share/ShareDetail?shareId=${data.objectId}`;
		if (data.objectType == 1) {
			url = `/pages/question/QuestionDetail?questionId=${data.objectId}`;
		} else if (data.objectType == 2) {
			url = `/pages/carousel/ExamQuestion?questionId=${data.objectId}`;
		} else if (data.objectType == 3) {
			url = `/pages/carousel/WebView?url=${encodeURI(data.outerLink)}`;
		}
		uni.navigateTo({
			url: url,
		});
	};

	const goSearch = () => {
		uni.navigateTo({
			url: `/pages/search/SearchIndex`,
		});
	};
</script>

<style lang="scss" scoped>
	.top {
		padding: 0px 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #9005fa;
		height: 40px;

		.logo {
			color: #fff;
			font-size: 20px;
		}

		.search {
			font-size: 25px;
			color: #fff;
		}
	}

	.uni-margin-wrap {
		width: 100%;
		background: #e0e0e0;

		.swiper-box {
			height: 200px;
		}

		.swiper-item {
			justify-content: center;
			align-items: center;
			display: flex;
			height: 200px;
		}
	}

	.quick-list {
		display: flex;
		margin-top: 20px;
		height: 150px;

		.quick-item {
			width: 100%;
			margin: 0px 5px;
			border-radius: 5px;
			padding: 15px;
			color: #fff;

			.title {
				font-weight: bold;
			}

			.summary {
				font-size: 14px;
				margin-top: 2px;
			}

			.btn {
				margin-top: 10px;
				float: left;
				font-size: 12px;
				border-radius: 5px;
				padding: 4px 10px 4px 10px;
			}
		}

		.search1 {
			background: linear-gradient(to right, #3715df, #6090de);

			.btn {
				background: #6b92ed;
			}
		}

		.search2 {
			background: linear-gradient(to right, #3944df, #89d6de);

			.btn {
				background: #6b92ed;
			}
		}

		.search3 {
			background: linear-gradient(to right, #3949df, #936ede);
			;

			.btn {
				background: #6b92ed;
			}
		}


		.interview1 {
			background: linear-gradient(to right, #6f24df, #5d5dde);

			.btn {
				background: #6b92ed;
			}
		}

		.interview2 {
			background: linear-gradient(to right, #6f24df, #5d5dde);

			.btn {
				background: #6b92ed;
			}
		}
	}

	.category-title {
		margin-top: 20px;
		padding-left: 10px;
		font-weight: bolder;
		color: #464646;
	}

	.category-list {
		margin-top: 10px;
		overflow: hidden;
		padding: 0px 5px 10px 5px;

		.category-item {
			padding: 3px;

			.category-item-inner {
				height: 100px;
				border-radius: 5px;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 20px;
				overflow: hidden;
			}
		}
	}
</style>